import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import './sideBar.css';
const styles = {
  sidebar: {
    flex: 1,
    minWidth: '150px',
    maxWidth: '250px',
    backgroundColor: '#f8fafc',
    padding: '20px',
    borderRight: '1px solid #e2e8f0',
    overflowY: 'auto',
    boxShadow: '2px 0 5px rgba(0,0,0,0.05)'
  },
  section: {
    marginBottom: '20px'
  },
  title: {
    fontSize: '35px',
    fontWeight: '600',
    color: '#334155',
    marginBottom: '15px',
    paddingBottom: '8px',
    borderBottom: '2px solid #e2e8f0'
  },
  itemList: {
    display: 'flex',
    flexDirection: 'column',
    gap: '15px'
  },
  item: {
    display: 'flex',
    alignItems: 'center',
    padding: '10px 15px',
    backgroundColor: 'white',
    borderRadius: '8px',
    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
    transition: 'all 0.2s ease',
    cursor: 'pointer',
    ':hover': {
      transform: 'translateX(5px)',
      boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
      backgroundColor: '#f1f5f9'
    }
  },
  searchIcon: {
    marginRight: '10px',
    color: '#64748b'
  },
  searchText: {
    color: '#334155',
    fontSize: '14px'
  },
  deleteButton: {
    marginLeft: '100px',
    padding: '4px 8px',
    backgroundColor: 'transparent',
    border: '1px solid #e2e8f0',
    borderRadius: '4px',
    color: '#64748b',
    cursor: 'pointer',
    fontSize: '12px',
    transition: 'all 0.2s ease',
    ':hover': {
      backgroundColor: '#fee2e2',
      color: '#dc2626',
      borderColor: '#fecaca'
    }
  },
  clearButton: {
    marginTop: '15px',
    padding: '8px 12px',
    backgroundColor: '#f1f5f9',
    border: 'none',
    borderRadius: '6px',
    color: '#64748b',
    cursor: 'pointer',
    fontSize: '13px',
    fontWeight: '500',
    transition: 'all 0.2s ease',
    ':hover': {
      backgroundColor: '#e2e8f0',
      color: '#334155'
    }
  },
  newSearchButton: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    padding: '12px 15px',
    backgroundColor: '#3b82f6',
    color: 'white',
    border: 'none',
    borderRadius: '8px',
    fontSize: '16px',
    fontWeight: '600',
    cursor: 'pointer',
    transition: 'all 0.2s ease',
    boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
    ':hover': {
      backgroundColor: '#2563eb',
      transform: 'translateY(-2px)',
      boxShadow: '0 4px 8px rgba(0,0,0,0.15)'
    },
    marginBottom: '40px',
    marginTop: '30px',
  },
  chatIcon: {
    marginRight: '10px',
    fontSize: '18px'
  }
};

const Sidebar = ({ history, hotSearches,onDeleteHistory,delete_all,onNewSearch }) => {
  const handleSearchClick = (query) => {
    // useEffect(()=>{

    // },[])
    console.log('搜索:', query);
    // 这里可以添加实际的搜索逻辑
  };

  const clearHistory = () => {
    console.log('清空历史记录');
    delete_all();
    // 这里可以添加清空历史记录的逻辑
  };
  const handleDelete = (index, e) => {
    e.stopPropagation(); 
    if (onDeleteHistory) {
      onDeleteHistory(index);
      console.log("删除成功，第",index,'个')
    }
  };
  return (
    <div style={styles.sidebar}>
      <div style={styles.fixedSection}>
        <h3 style={styles.title}>DeepCheck</h3>
        <button 
          style={styles.newSearchButton}
          onClick={onNewSearch}  
        >
          <span style={styles.chatIcon}>💬</span>
          开启新搜索
        </button>
      </div>
      
      {/* 可滚动区域 - 只有这部分会滚动 */}
      <div style={styles.scrollableSection}>
        <div style={styles.itemList}>
          {history.map((item, index) => (
            <div key={`history-${index}`}>
              <div
                className="history-item" 
                onClick={() => handleSearchClick(item)}
                data-text={item} 
                style={styles.item}
              >
                <span style={styles.searchIcon}>⌕</span>
                <span style={styles.searchText}>{item}</span>
                <button 
                  style={styles.deleteButton}
                  onClick={(e) => handleDelete(index, e)}
                  title="删除此项"
                >
                  ×
                </button>
              </div>
            </div>
          ))}
        </div>
        {history.length > 0 && (
          <button 
            style={styles.clearButton}
            onClick={clearHistory}
          >
            清空历史记录
          </button>
        )}
      </div>

      {/* 热门搜索区域 */}
      {/* <div style={styles.section}>
        <h3 style={styles.title}>热门搜索</h3>
        <div style={styles.itemList}>
          {hotSearches.map((item, index) => (
            <Link 
              to={`/search?q=${encodeURIComponent(item)}`} 
              key={`hot-${index}`}
              style={{ textDecoration: 'none' }}
            >
              <div style={styles.item}>
                <span style={styles.searchIcon}>🔥</span>
                <span style={styles.searchText}>{item}</span>
              </div>
            </Link>
          ))}
        </div>
      </div>*/}
    </div>
  );
};

export default Sidebar;